<template>
    <van-nav-bar
        :title="$t('wallet.title')"
    />
    <div class="wallet app-body app-pad">
        <div class="wallet-money">
            <div class="wallet-all">{{ $t('wallet.all') }}</div>
            <div class="wallet-num">{{ $t('moneyIcon') }}{{ money }}</div>
            <img src="@/assets/images/wallet_bg.png" alt="" class="wallet-bg">
        </div>
        
        <div class="wallet-card app-show" @click="onJump('/addCard')">
            {{ $t('wallet.addCard') }}
        </div>

        <div class="app-flex-bet">
            <div class="wallet-btn app--show" @click="onJump('/balance')">{{ $t('wallet.balance') }}</div>
            <div class="wallet-btn app--show" @click="getIsReal(money)">{{ $t('wallet.draw') }}</div>
        </div>

        <van-cell-group>
            <van-cell 
                v-for="(item, index) in list" 
                :key="index" 
                :clickable="false" 
                @click="onJump(item.path)"
                :title="item.title" 
                is-link />
        </van-cell-group>
    </div>
    
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from "vue-router"
import { getUserBalance, getAuthInfo } from "@/api/card"
import { Toast } from "vant";
const { t } = useI18n()
const list = [
    { path: "/myCard", title: t('wallet.myCard') },
    { path: "/myInte", title: t('wallet.credit') },
    { path: "/identity", title: t('wallet.identity') },
    { path: "/draw", title: t('wallet.drawHis') },
]
const router = useRouter()
const money = ref(0)
function onJump(path, query) {
    router.push({
        path,
        query
    })
}
async function getIsReal (money) {
    // let ret = await getAuthInfo()
    // // 状态：1未认证 2 认证中 3认证成功 4 认证失败
    // let status = ret?.data?.status || 1
    // if (status == 1 || status == 4) {
    //     router.push({
    //         path: "/identity"
    //     })
    // } else if (status == 2) {
    //     Toast(t("two.realMsg"))
    // } else if (status == 3) {
        onJump('/withdraw', { money })
    // }
}
getUserBalance().then(res => {
    console.log(res)
    if (res.code != 200) return Toast(t('two.getErr'))
    money.value = res.data
})

</script>
<style lang="less">
.wallet {
    background: var(--bg);
    &-bg {
        width: 100%;
        margin-top: 15px;
    }
    &-money {
        position: relative;
        color: #fff;
    }
    &-all {
        font-size: 18px;
        font-weight: bold;
        position: absolute;
        left: 16px;
        top: 36px;
    }
    &-num {
        left: 10px;
        position: absolute;
        bottom: 21px;
        font-size: 31px;
    }
    &-card {
        width: 100%;
        font-size: 18px;
        padding: 14px 0;
        text-align: center;
        background: #fff;
        margin-top: 30px;
        border-radius: 10px;
        color: #DE5D7A;
        font-size: 18px;
        line-height: 1;
    }
    &-btn {
        margin: 10px 0;
        background: #DE5D7A;
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
        border-radius: 10px;
        width: 48%;
        font-size: 18px;
        font-weight: bold;
        color: #FEFEFE;
        text-align: center;
        line-height: 1;
        padding: 14px 0;
    }
}
</style>